<template>
	<div class="flexcenter">
		<div class="max_width paddingtb">
			<div class="flex">
				<img class="imgBox margin_right3" :src="slt_item" alt="">
				<div class="justify_between_column">
					<div class="text_bs color_zero">{{goodsInfo.name}}</div>
					<div class="priceBox">
						<span>￥</span>
						<span class="text">{{jg_item}}</span>
					</div>
					<div class="flexleft" v-for="(item,index) in goodsInfo.spu" :key="index">
						<div class="text_f color_six margin_right3">{{item.spu}}</div>
						<div class="flexleft flex_wrap">
							<div class="pointer" v-for="(ite,inde) in item.spuitem_for" :key="inde" :class="ite.is_check?'active':'noActive'" @click="checkspu(item,ite)">{{ite.name}}</div>
						</div>
					</div>
					<div class="flexleft">
						<div class="text_f color_six margin_right3">数量</div>
						<el-input-number v-model="num" @change="handleChange" :min="1" 
							label="数量"></el-input-number>
					</div>
					<div class="buyBtn pointer" @click="buy">立即购买</div>
				</div>
			</div>
			<!-- 商品详情 -->
			<div class="ffffff radius mainpadding margin_top">
				<div class="text_ft color_zero">商品详情</div>
				<div class="text_d color_six margin_top2">
					<div v-html="goodsInfo.content"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {getGoodsInfo} from "@/API/goods"
	export default {
		data() {
			return {
				num: 1,
				goodsInfo:{},
				xl_item:0,
				slt_item:"",
				jg_item:0,
				kc_item:0,
				unique:"",
				listid:""
			}
		},
		watch:{
			goodsInfo:{
				handler(newval){
					let arr = []//选中的规格
					newval.spu.forEach(item=>{
						item.spuitem_for.forEach(ite=>{
							if(ite.is_check){
								arr.push(ite.name)
							}
						})
					})
					newval.sku.forEach(item=>{
						if(item.sku==arr.join()){
							this.xl_item = item.sales_num
							if(this.goodsInfo.spu.length){
								this.slt_item = item.image_text
							}
							this.jg_item = item.price
							this.kc_item = item.stock_num
							this.unique = item.unique
						}
					})
				},
				deep:true
			}
		},
		mounted() {
			this.listid = this.$route.query.id
			this.getDetail()
		},
		methods: {
			async getDetail(){
				let res = await getGoodsInfo({
					id:this.$route.query.id
				})
				res.data.data.info.spu.forEach(item=>{
					let arr = []
					item.spuitem_arr.forEach((ite,index)=>{
						arr.push({
							name:ite,
							is_check:false
						})
					})
					this.$set(item,"spuitem_for",arr)
				})
				this.slt_item = res.data.data.info.image_text
				this.jg_item = res.data.data.info.price
				this.goodsInfo=res.data.data.info
			},
			handleChange(value) {
				console.log(value);
			},
			checkspu(data1,data){
				data1.spuitem_for.forEach(item=>{
					if(item==data){
						item.is_check = true
					}else{
						item.is_check = false
					}
				})
			},
			buy(){
				if(this.unique==""){
					this.$message.warning("请选择规格")
					return false
				}
				if(this.kc_item<this.num){
					this.$message.error("库存不足")
					return false
				}
				this.$router.push({
					path:"/shopping/goodsConfirmOrder",
					query: {
						goods_num:this.num,
						goods_id:this.listid,
						goods_sku_unique:this.unique
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgBox {
		width: 397px;
		min-width: 397px;
		height: 396px;
		border-radius: 8px 8px 8px 8px;
	}

	.priceBox {
		font-size: 20px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF6E00;

		.text {
			font-size: 30px;
		}
	}

	.active {
		padding: 5px 10px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #3478F5;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
		margin-right: 10px;
	}

	.noActive {
		padding: 5px 10px;
		background: #F3F3F3;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #E2E5EA;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-right: 10px;
	}

	.buyBtn {
		width: 135px;
		height: 47px;
		line-height: 47px;
		text-align: center;
		background-color: #3478F5;
		border-radius: 4px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>